<template>
  <div class="home">

    <el-menu
        :uniqueOpened="true"
        default-active="2"
        @open="handleOpen"
        @close="handleClose"
        class="el-menu-vertical-demo"

    >
      <el-submenu index="1">
        <template #title>
          <i class="el-icon-location"></i>
          <span class="fontL">笔记</span>
        </template>

        <div class="fontM">
          <el-menu-item index="1-1">前端开发:html5/vue/react/node</el-menu-item>
          <el-menu-item index="1-2">后端开发:java/python</el-menu-item>
          <el-menu-item index="1-3">移动开发:IOS/Android</el-menu-item>
          <el-menu-item index="1-4">计算机基础:算法/数学/数据库</el-menu-item>
          <el-menu-item index="1-5">前沿:AI/大数据/数据分析</el-menu-item>
          <el-menu-item index="1-6">测试:自动化测试/容器</el-menu-item>
          <el-menu-item index="1-7">GIS:三维,three.js</el-menu-item>
        </div>


      </el-submenu>

      <el-menu-item index="2">
        <template #title>
          <i class="el-icon-menu"></i>
          <span class="fontL">书籍</span>
        </template>
      </el-menu-item>
      <el-menu-item index="3">
        <template #title>
          <i class="el-icon-document"></i>
          <span class="fontL">视频</span>
        </template>
      </el-menu-item>

      <el-menu-item index="4">
        <template #title>
          <i class="el-icon-setting"></i>
          <span class="fontL">前沿</span>
        </template>
      </el-menu-item>
    </el-menu>

    <el-divider></el-divider>


    <span>探索功能</span>
    <el-menu
        :uniqueOpened="true"
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"


    >
      <el-menu-item index="1">
        <template #title>
          <i class="el-icon-location"></i>
          <span>工具</span>
        </template>
      </el-menu-item>

      <el-menu-item index="2">
        <template #title>
          <i class="el-icon-menu"></i>
          <span>链接</span>
        </template>
      </el-menu-item>
      <el-menu-item index="3">
        <template #title>
          <i class="el-icon-document"></i>
          <span>漫画</span>
        </template>
      </el-menu-item>

      <el-menu-item index="4">
        <template #title>
          <i class="el-icon-setting"></i>
          <span>学术</span>
        </template>
      </el-menu-item>
    </el-menu>


  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent(
    {
      name: "BHeader",
      setup() {
        const handleOpen = (key:string, keyPath:string) => {
          console.log(key, keyPath);
        }
        const handleClose = (key:string, keyPath:string) => {
          console.log(key, keyPath);
        }


        return {
          handleOpen,
          handleClose


        }


      }


    }
)
</script>

<style lang="scss" scoped>

.home{

  user-select: none;
  .fontL {
    font-weight: bolder;
    font-size: 18px
  }

  .fontM {

    .el-menu-item {
      color: #A9B1B3;
      font-size: 1.3rem;
      letter-spacing: 0.1rem;
    }

  }
}



</style>
